<template>
<div>
        <!-- 头部导航 -->
        <van-nav-bar title="频道管理" left-arrow></van-nav-bar>
        <!-- 内容 -->
        <div class="content">
            <h1>点击删除频道</h1>
            <van-grid :column-num="4" :gutter="10">
                <van-grid-item v-for="value in list" 
                :key="value.id" :text="value.name"
                @click="delFn(value.id)" />
            </van-grid>
        </div>
        <div class="content">
            <h1>点击添加频道</h1>
            <van-grid :column-num="4" :gutter="10">
                <van-grid-item v-for="value in delList" 
                :key="value.id" :text="value.name"
                @click="addFn(value.id)" />
            </van-grid>
        </div>
</div>
</template>
<script>
import { category } from "@/api/news.js"
export default {
    data(){
        return {
            list: [],
            delList: [],
            defaultCategory: []
        }
    },
    created(){
        //判断缓存中是否存在 栏目数据，如果有直接从缓存中获取数据进行渲染
        // 如果没有，则调用接口获取数据
        this.list = JSON.parse(localStorage.getItem("list"))||[];
        this.delList = JSON.parse(localStorage.getItem("delList"))||[];
        // 当缓存中的list数组delList数组都为空的时候，说明没有缓存，没缓存则
        // 从接口中获取数据
        if(this.list.length === 0 && 
        this.delList.length === 0 ){
            category().then(res=>{
                // console.log(25, res)
                this.list = res.data.data;
                this.defaultCategory = this.list.splice(0,2)
                // 缓存关注和头条 --- 因为这个首页会用到
                localStorage.setItem("defaultCategory", JSON.stringify(this.defaultCategory))
            })
        }

    },
    methods: {
        delFn(id){
            // 删除频道
            let index = this.list.findIndex(item=>item.id === id)
            let res = this.list.splice(index, 1)
            // 保存被删除的数据
            this.delList.push(...res)
            // 缓存数据
            localStorage.setItem("list", JSON.stringify(this.list))
            localStorage.setItem("delList", JSON.stringify(this.delList))
        },
        addFn(id){
            // 注意：一定要先添加再删除
            // let res = this.delList.filter(item=>item.id === id)
            // this.list.push(...res)
            // this.delList = this.delList.filter(item=>item.id !== id)
            let index = this.delList.findIndex(item=>item.id===id)
            let res = this.delList.splice(index, 1)
            this.list.push(...res)
            // 缓存数据
            localStorage.setItem("list", JSON.stringify(this.list))
            localStorage.setItem("delList", JSON.stringify(this.delList))
        }
    }
}
</script>

<style lang="less" scoped>
//  /deep/ 表示样式穿透是less的语法，专门用于设置组件内部标签的样式 
/deep/ .van-nav-bar{
    border-bottom: 1px solid #ddd;
    .van-icon-arrow-left{
        color: #000;
    }
}
.content{
    padding: 20px 10px;
    h1{
        font-size: 18px;
    }
    /deep/.van-grid{
        margin-top: 30px;
        .van-grid-item__content {
            border: 1px solid #ddd;
            .van-grid-item__text{
                font-size: 14px;
            }
        }
    }
}
</style>